<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width:400px;
            height:2000px;
            background: red;
            margin:0 auto;
            position: relative;
        }
        #box2{
            width: 200px;height: 100px;margin-left: 20px;
            background: #55a532;position: absolute;
            border: 5px solid green;padding-left: 20px;
        }
        #input{
            position:absolute;
            right:10px;
            top:10px;
        }

    </style>
</head>
<body>
<!--

			offsetLeft ：

				注意：1. 没有定位的情况，偏移量表示离浏览器窗口的距离
					2. 距离父级元素的左偏移量 : left + margin-left;

			offsetTop :

				注意：1. 没有定位的情况，偏移量表示离浏览器窗口的距离
					2. 距离父级元素的上偏移量 : left + margin-left;

			offsetWidth : width + border + padding

			offsetHeight : height + border + padding

			scrollTop : 滚动的高度


		-->
    <div id="box">
        <div id="box2">

        </div>
    </div>
    <input type="text" id="input">
    <script type="text/javascript">
        var box2 = document.getElementById("box2");
        var input = document.getElementById("input");
        // input.value = box2.offsetLeft;
        input.value = box2.offsetWidth;
    </script>

</body>
</html>